<template>
  <div class="newsDetails">
    <div class="app_details_top">
      <div class="t4_top_w">
          <span>
            当前位置：
          </span>
        <span>
            <a href="/">
              首页
            </a>
            >>
          </span>
        <span>
            <a href="/newsInformation">新闻资讯</a>
            >>
          </span>
        <span>
            {{list.title}}
          </span>
      </div>
    </div>
    <div class="main_contents_details">
      <div class="t4_top_w">
        <div class="kfdtshadow">
          <div class="app_tit">
            <span class="tit3yypl">文章内容</span>
          </div>
          <div class="kfdt_page03_b">
            <div class="kfdt_page03_b_tit">
              <p class="kfdt_page03_b_p" style="border-bottom: 1px solid #ccc">{{ list.title }}</p>
              <p class="kfdt_page03_b_p">
                <span>分类：{{ list.type === 1 ? '社会资讯' : list.type === 2 ? '机关发文' : list.type === 3 ? '操作指南' : '未知分类' }}</span>
                <span>发布人：{{list.cjr}}</span>
                <span>转载时间：{{ list.updateTime }}</span>
                <span>浏览量：{{list.viewCount}}</span>
              </p>
            </div>
            <div class="kfdt_page03_cons" v-html="list.content">
            </div>
            <div class="fjdz">
              附件地址：
              <p v-for="(item,index) in list.list" :key="index">
                 <span @click="xzBtn(item)">
                   {{item.name}}
                 </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getZxDetail} from "../../../utils/httpUtils";
export default {
  data(){
    return{
      detailsId:'',
      list:{}
    }
  },
  mounted() {
    console.log(this.$route.query.id,"接收过来的参数")
    this.detailsId = this.$route.query.id
    // 获取详情
    getZxDetail({id:this.detailsId}).then(res=>{
      console.log(res,"详情")
      this.list = res
    })
  },
  methods:{
    xzBtn(urls){
      console.log(urls)
      this.$axios({
        url: xhDomain + `/api/dataFile/downloadFile/${urls.id}`,
        method: 'post',
        responseType: 'blob', // 确保响应是二进制数据
        headers: {
          'Content-Type': 'application/json',
          "Authorization": localStorage.getItem('token')
        },
      }).then((res) => {
        console.log(res, 'res')
        const blob = new Blob([res.data], { type: 'application/octet-stream' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = urls.name; // 设置下载文件的文件名，可以根据需要修改
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
        }, 100);
      }).catch((err) => {
        console.log(err,"err")
        // responseType: 'blob' 这个类型获取报错提示
        if (err.response.data.type === 'application/json') {
          const fileReader = new FileReader();
          fileReader.readAsText(err.response.data, 'utf-8');
          fileReader.onload = function () {
            const result = JSON.parse(fileReader.result);
            console.log(result, 'result');
            this.$message.error(result.message);
          }.bind(this); // Bind `this` to the onload function
          return;
        }

        const content = err.data
        const blob = new Blob([content], {
          type: "application/octet-stream"
        }) //构造一个blob对象来处理数据
        // this.$message.error(err.response.message)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.newsDetails{
  width: 100%;
  .app_details_top{
    width: 100%;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #e1e4e6;
    span{
      color: #65799a;
      //font-size: 18px;
      a{
        color: #65799a;
      }
    }
  }
  .main_contents_details{
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
    padding: 30px 0;
    .kfdtshadow{
      box-shadow: 0 0 8px #e6ebf1;
      border: 2px solid #e6ebf1;
      .app_tit {
        height: 60px;
        border-bottom: 1px solid #e6e6e6;
        line-height: 60px;
        overflow: hidden;
        .tit3yypl{
          font-size: 20px;
          color: #464646;
          font-weight: bold;
          position: relative;
          padding: 0 0 0 0;
          float: left;
          margin-left: 20px;
        }
      }
      .kfdt_page03_b{
        margin: 0 88px;
        padding-bottom: 80px;
        .kfdt_page03_b_tit{
          height: 100px;
          border-bottom: 1px solid #f5f5f5;
          margin-bottom: 25px;
          padding: 30px 0 18px 0;
          .kfdt_page03_b_p{
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: #464646;
            span{
              padding-left: 15px;
              font-size: 12px;
              color: #bcbec1;
            }
          }
        }
        .kfdt_page03_cons{
          min-height: 300px;
          /deep/ .ql-align-justify{
            img{
              width: 100% !important;
            }
          }
        }
        .fjdz{
          color: #464646 !important;
          p{
            cursor: pointer;
            padding: 5px 0;
          }
        }
      }
    }
  }
}
</style>
